<template>
	<!-- 账号设置 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">
		
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m029}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="h24">
			
		</view>
		<!-- 菜单1 -->
		<view class="mx-3 menuList A-Medium" :class="model=='light'?'menuListLight':''">
			<!-- UID -->
			<view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						UID
					</view>
				</view>
				<view class="content flex-1">
					{{mobileUserId}}
				</view>
				<view @click="$tool.copyText(mobileUserId)" class="f0">
					<image class="icon2" :src="'/static/images/mine/14_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 头像 -->
			<view @click="openPopup" class="list flex align-center mx-3" style="padding: 19rpx 0;" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m030}}
					</view>
				</view>
				<view class="content flex justify-end f0 flex-1">
					<image v-if="avatarImg" class="avatar" :src="$tool.changeImg(avatarImg)" mode=""></image>
					<image v-else class="avatar" :src="'/static/images/defalutAvatar_'+model+'.png'" mode=""></image>
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 昵称 -->
			<view @click="openPopup2(1)" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m031}}
					</view>
				</view>
				<view class="content flex-1">
					{{nickname}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 手机号 -->
			<view @click="upDateAccount(1)" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m032}}
					</view>
				</view>
				<view class="content flex-1" :class="!mobileNumber?'empty':''">
					{{mobileNumber ? mobileNumber:i18n.m041}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 邮箱 -->
			<view @click="upDateAccount(2)" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m033}}
					</view>
				</view>
				<view class="content flex-1" :class="!email?'empty':''">
					 {{email?email:i18n.m041}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 实名认证 -->
			<view @click="goPage" class="list py-3 flex align-center mx-3" style="border: none;" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m034}}
					</view>
				</view>
				<view class="content flex-1" :class="true?'shenhe':''">
					{{passportAuthStatus == 3 ? authName : ''}}
					（{{
						passportAuthStatus==0?i18n.m003:
						passportAuthStatus==1?i18n.m042:
						passportAuthStatus==2?i18n.m043:
						passportAuthStatus==3?i18n2.l016:''
					}}）
					<!-- {{}}拒绝审核 -->
					<!-- {{i18n.m002}}:'已认证', -->
					<!-- {{}}:'未认证', -->
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 菜单2 -->
		<view class="mx-3 mt-3 menuList A-Medium" :class="model=='light'?'menuListLight':''">
			<!-- 登录密码 -->
			<view @click="changePass(1)" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m035}}
					</view>
				</view>
				<view class="content flex-1">
					{{i18n.m039}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 资金密码 -->
			<view @click="changePass(2)" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m036}}
					</view>
				</view>
				<view class="content flex-1 empty">
					{{i18n.m040}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 账户注销 -->
			<view @click="outlog" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m037}}
					</view>
				</view>
				<view class="content flex-1">
					
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 面容登录 -->
			<!-- <view @click="openPopup2(2)" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m038}}
					</view>
				</view>
				<view class="content flex-1">
					
				</view>
				<switch color="#5951BA" :disabled="!faceId" :checked="isSetFace" @change="switchChange" style="transform:scale(0.7)"/>
			</view> -->
		</view>
		<!-- 上传头像弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupWrap pt-1 pb-2 A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view @click="confirm(item)" v-for="(item,index) in popupList" :style="index==2?'border:none;':''" class="list py-3" :class="model=='light'?'listLight':''">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
		<!-- 昵称设置、面容设置弹窗 -->
		<uni-popup ref="popup2" type="bottom">
			<view class="popupWrap A-Medium" :class="model=='light'?'popupWrapLight2':''">
				<view class="titleWrap py-4 mx-4 flex align-center justify-between">
					<view class="f0 opacity0">
						<image src="@/static/images/cha.png" mode=""></image>
					</view>
					<view class="">
						{{popup2Type==1?i18n.m047:popup2Type==2?i18n.m048:''}}
					</view>
					<view @click="closePopup2" class="f0">
						<image src="@/static/images/cha.png" mode=""></image>
					</view>
				</view>
				<view class="formWrap flex align-center A-Regular">
					<view class="formTitle A-Medium ml-3 mr-2" :class="model=='light'?'formTitleLight':''">
						{{popup2Type==1?i18n.m049:popup2Type==2?i18n.m035:''}}
					</view>
					<view class="inputWrap flex align-center px-3" :class="model=='light'?'inputWrapLight':''">
						<input :adjust-position="false" :type="popup2Type==1?'text':'password'" v-model="content" :placeholder="popup2Type==1?i18n.m050:i18n.m051" class="flex-1 placeholderClass A-Medium" :class="model=='light'?'placeholderClassLight':''" :placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClass':''">
					</view>
				</view>
				<!-- 提交按钮 -->
				<view @click="confirm2" class="btn mx-auto A-Medium clickCss">
					{{i18n.m052}}
				</view>
				<view class="h24">
					
				</view>
				<view class="h24">
					
				</view>
				<view class="" :style="'height:'+onKeyboardHeight+'px;'">
					
				</view>
			</view>
		</uni-popup>
		<modelP :type="4" ref="modelP" @confirm="confrim"></modelP>
	</view>
</template>

<script>
	import {
		setNickname,
		checkPassword,
		logout
	} from '@/core/api/user.js';
	import {
		loginAvatarImg
	} from '@/core/api/index.js';
	import modelP from '@/components/modelP.vue';
	export default {
		components:{
			modelP
		},
		data() {
			return {
				popupList:[
					{
						id:1,
						name:''
					},{
						id:2,
						name:''
					},{
						id:3,
						name:''
					},
				],
				popup2Type:1,//1昵称设置2面容设置
				content:'',
				onKeyboardHeight:0,
			}
		},
		onLoad() {
			this.initDate();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			this.$store.dispatch('config/getCustomerInfo');
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		
		computed: {
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus;
			},
			authName() {
				return this.$store.state.config.authName;
			},
			i18n() {
				return this.$t('mine');
			},
			i18n2() {
				return this.$t('last');
			},
			avatarImg(){
				return this.$store.state.config.avatarImg;
			},
			model() {
				return this.$store.state.config.model;
			},
			mobileNumber() {
				return uni.getStorageSync('mobileNumber');
			},
			email() {
				return uni.getStorageSync('email');
			},
			nickname(){
				return this.$store.state.config.nickname;
			},
			mobileUserId() {
				return uni.getStorageSync('mobileUserId');
			},
			faceId(){
				return this.$store.state.config.faceId;
			},
			isSetFace(){
				return uni.getStorageSync('isSetFace');
			}
		},
		methods: {
			outlog(){
				this.$refs.modelP.open();
				// this.$tool.showLoading();
				// uni.hideLoading();
			},
			confrim(){
				logout({
					mobileUserId:uni.getStorageSync('mobileUserId')
				}).then(res=>{
					uni.removeStorageSync('token');
					uni.removeStorageSync('mobileUserId');
					uni.removeStorageSync('email');
					uni.removeStorageSync('mobileNumber');
					this.$store.commit("config/set_isContinue",false);
					this.$store.commit("config/set_isContinue2",false);
					this.$tool.navTo('/pages/login/login',3);
				})
			},
			goPage(){
				// this.$tool.navTo('/pages/mine/nameAuth1')
				if(this.passportAuthStatus != 3){
					this.$tool.navTo('/pages/mine/nameAuth1')
				}
			},
			changePass(type){
				let obj = {
					type,
					verifyType:'',
					mobileNumber:'',
					email:''
				}
				if(this.mobileNumber){
					obj.mobileNumber = this.mobileNumber;
				}
				if(this.email){
					obj.email = this.email;
				}
				this.$tool.navTo(this.$tool.handleUrl('/pages/mine/testVerify',obj));
			},
			upDateAccount(type){
				// true- 有手机号或有邮箱
				let isVerify;
				if((type==1&&this.mobileNumber)||(type==2&&this.email)){
					isVerify=1;
				}
				this.$tool.navTo(`/pages/mine/upDateAccount?type=${type}&isVerify=${isVerify}`)
			},
			switchChange(e){
				uni.setStorageSync('isSetFace',e.target.value);
			},
			openPopup() {
				this.$refs.popup.open('bottom');
			},
			closePopup(){
				this.$refs.popup.close();
			},
			confirm(item){
				this.closePopup();
				if(item.id==1||item.id==2){
					this.$tool.uploadImg({count:1},item.id).then(res=>{
						uni.hideLoading();
						console.log(res[0],'cs')
						loginAvatarImg({
							avatarImg:res[0],
							mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
						}).then(res=>{
							this.$store.dispatch('config/getCustomerInfo');
						})
					})
				}
			},
			openPopup2(type) {
				this.popup2Type = type;
				this.content = '';
				if(type==1){
					// 昵称设置
					this.$refs.popup2.open('bottom');
					uni.onKeyboardHeightChange(this.getKeyboardHeight)
				} else if(type==2){
					// 面容设置
					if(this.faceId){
						
					}else{
						this.$refs.popup2.open('bottom');
						uni.onKeyboardHeightChange(this.getKeyboardHeight)
					}
				}
			},
			closePopup2(){
				uni.offKeyboardHeightChange(this.getKeyboardHeight)
				this.$refs.popup2.close();
			},
			getKeyboardHeight(res){
				this.onKeyboardHeight = res.height;
			},
			confirm2(item){
				if(this.popup2Type==1){
					// 昵称设置
					if(this.content==='') return this.$tool.showToast(this.i18n.m050);
					this.$tool.showLoading();
					setNickname({
						mobileUserId:uni.getStorageSync('mobileUserId'),
						nickname:this.content
					}).then(res=>{
						this.closePopup2();
						this.$store.dispatch('config/getCustomerInfo');
						uni.hideLoading();
					}).catch(res=>{
						uni.hideLoading();
					})
				} else if(this.popup2Type==2){
					// 面容设置
					if(this.faceId){
						return;
					}
					if(this.content==='') return this.$tool.showToast(this.i18n.m051);
					this.$tool.showLoading();
					checkPassword({
						mobileUserId:uni.getStorageSync('mobileUserId'),
						password:this.content
					}).then(res=>{
						uni.hideLoading();
						this.$tool.navTo('/pages/login/camera');
					}).catch(res=>{
						uni.hideLoading();
					})
				}
				// this.closePopup2();
			},
			initDate() {
				for (let i = 0; i < this.popupList.length; i++) {
					this.popupList[i].name = this.i18n['m0' + (i + 44)];
				}
			}
		}
	}
</script>
<style>
	
</style>
<style scoped lang="scss">
	// 弹窗---开始
	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;
		.titleWrap {
			margin-bottom: 6rpx;
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.list {
			text-align: center;
			border-bottom: 2rpx solid #1F2128;
		}
		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}
	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}
	.popupWrapLight2 {
		background: #E6E8EF;
		color: #0E0F11;
	}
	
	// 弹窗---结束
	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #F7F7F7;
		}
		.formTitleLight {
			color: #0E0F11;
		}
		.inputWrap {
			width: 556rpx;
			height: 80rpx;
			background: #16181C;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #1F2128;
			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}
			.placeholderClassLight {
				color: #0E0F11;
			}
		}
		.inputWrapLight {
			background: #FFFFFF;
			border: 2rpx solid #FFFFFF;
		}
	}
	.h24 {
		height: 24rpx;
	}
	.menuList {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		overflow: hidden;
	
		.list {
			border-bottom: 2rpx solid #1F2128;
			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			.title {
				font-size: 28rpx;
				color: #F7F7F7;
			}
			.titleLight {
				color: #0E0F11;
			}
	
			.content {
				font-size: 28rpx;
				color: #7F838D;
				text-align: right;
			}
			.empty {
				color: #5951BA;
			}
			.shenhe {
				color: #82DA4C;
			}
			.icon2 {
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}
	
	.menuListLight {
		background: #ffffff;
		border: 2rpx solid #F4F4F4;
	}
	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		margin-top: 46rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>
